<template>
  <div>
    <div class="users_list" v-if="scriptItem.multiple">
      <el-select v-model="dataForm[scriptItem.text]"  :multiple="scriptItem.multiple" @change="selectChange" clearable filterable  :placeholder="$t('placeholder.s')">
        <li style="padding:0 20px"><el-checkbox  v-model="isSelect" @change="selectAll">All</el-checkbox></li>
        <el-checkbox-group v-model="modelCheckBox" @change="selectChangecheckbox">
        <el-option
          v-for="item in dataList"
          :key="item[scriptItem.fieldLabel]"
          :label="item[scriptItem.fieldLabel]"
          :value="item[scriptItem.fieldValue]">
            <el-checkbox @click.stop.native="()=>{}" :label="item[scriptItem.fieldLabel]"></el-checkbox>
        </el-option>
        </el-checkbox-group>
      </el-select>
    </div>
    <div v-else style="margin-top:10px">
      <el-select v-model="dataForm[scriptItem.text]" clearable filterable  :placeholder="$t('placeholder.s')">
        <el-option
          v-for="item in dataList"
          :key="item[scriptItem.fieldLabel]"
          :label="item[scriptItem.fieldLabel]"
          :value="item[scriptItem.fieldValue]">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'
export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      dataList: [],
      isSelect: true,
      fieldLabel: [],
      fieldValue: [],
      modelCheckBox: []
    }
  },
  created () {
    this.getOptionList()
  },
  methods: {
    getfieldLabel () {
      this.fieldLabel = []
      this.dataList.forEach(element => {
        this.fieldLabel.push(element[this.scriptItem.fieldLabel])
        this.fieldValue.push(element[this.scriptItem.fieldValue])
      })
      this.intSelectAll(this.isSelect)
    },
    intSelectAll (val) {
      if (this.dataForm[this.scriptItem.text].length === this.dataList.length) {
        this.isSelect = true
        this.dataForm[this.scriptItem.text] = this.fieldValue
        this.modelCheckBox = this.fieldLabel
      }
      if (this.dataForm[this.scriptItem.text].length > 0 && this.dataForm[this.scriptItem.text].length < this.dataList.length) {
        this.isSelect = false
        let fieldLabel = []
        this.dataList.forEach(element => {
          if (this.dataForm[this.scriptItem.text].includes(element[this.scriptItem.fieldValue])) fieldLabel.push(element[this.scriptItem.fieldLabel])
        })
        this.modelCheckBox = fieldLabel
      }
    },
    selectAll (val) {
      this.dataForm[this.scriptItem.text] = val ? this.fieldValue : []
      this.modelCheckBox = val ? this.fieldLabel : []
    },
    selectChange (val) {
      if (this.isSelect) {
        this.dataForm[this.scriptItem.text] = this.fieldLabel
        return
      }
      if (val.length === this.fieldLabel.length) this.isSelect = true
      if (this.dataForm[this.scriptItem.text].length > 0 && this.dataForm[this.scriptItem.text].length < this.dataList.length) {
        this.isSelect = false
        let fieldValue = []
        this.dataList.forEach(element => {
          if (val.includes(element[this.scriptItem.fieldValue])) fieldValue.push(element[this.scriptItem.fieldLabel])
        })
        this.modelCheckBox = fieldValue
      }
      this.$forceUpdate()
    },
    selectChangecheckbox (val) {
      if (this.isSelect) {
        this.modelCheckBox = this.fieldLabel
        return
      }
      let fieldValue = []
      this.dataList.forEach(element => {
        if (val.includes(element[this.scriptItem.fieldLabel])) fieldValue.push(element[this.scriptItem.fieldValue])
      })
      this.dataForm[this.scriptItem.text] = fieldValue
      if (val.length === this.fieldLabel.length) this.isSelect = true
    },
    getOptionList () {
      this.$http.get(
        this.scriptItem.originalUrl,
        {
          params: {
            tenantCode: this.$store.state.user.tenantCode
          }
        }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          this.dataList = []
          return this.$message.error(res.msg)
        }
        this.dataList = res.data
        this.getfieldLabel()
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss">
.users_list{
  .el-select{
    width: 100%;
    .el-input__inner{
      border: 0;
    }
  }
}
</style>
